<template>
<div>
	

	<div class="root">
		<div class="top_title">
			<div class="b_title">水中{{title}}课程第{{getNumber($route.query.level_id)}}阶段</div>
			<div class="s_title">第{{getNumber($route.query.program_id)}}次课&nbsp;课程视频</div>
	    </div>
		<video :src="filePath" controls  :poster="imgurl"></video>
		<button @click="quit" class="sub-button">退出</button>
	</div>
</div>
</template>

<script>
import { Toast } from 'Vant';
	export default{
		data(){
			return{
				filePath:"",
				imgurl:"",
				title:""
			}
		},
		mounted () {
			this.getEndVideo();
		},
		computed:{
			// this.$route.query.level_id
			
		},
		methods:{
			getNumber(id){
				switch (Number(id)) {
					case 1:
						return "一"
						break;
					case 2:
						return "二"
						break;
					case 3:
						return "三"
						break;
				
					default:
						break;
				}
				
			},
			quit(){
				this.$router.push('./solution')
				sessionStorage.setItem('index',1)
			},
			getEndVideo(){
				let openid = localStorage.getItem("openid")
				let program_id = this.$route.query.program_id;
				let level_id = this.$route.query.level_id;
				let assess_id = this.$route.query.assess_id
				this.$axios.post("assessment/prescription",{
					openid,
					level_id,
					program_id,
					assess_id
				}).then(res=>{
					console.log(res);
					if(res.data.code == 2000){
						this.title  = res.data.data.assess
						this.filePath = res.data.data.file_path
						this.imgurl = res.data.data.img
					}else{
						Toast({
							message:res.data.msg
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.root{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	button{
		width: 80%;
		border: none;
		height: 50px;
		border-radius: 10px;
	}
	.sub-button{
			width: 23rem;
			height: 3.8rem;
			box-sizing: border-box;
			background: linear-gradient(to right, #1FCAD1, #0383C4);
			border: none;
			outline: none;
			border-radius: 3rem;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 1.4rem;
			position: absolute;
			top: 60%;
		}
	video{
		position: absolute;
		top: 40%;
		width: 90%;
		border-radius:1rem;
		transform: translateY(-50%);
		}
		.top_title{
			text-align: center;
			display: flex;
			flex-direction: column;
			top: 9%;
			position: absolute;
		}
		.b_title{
			line-height: 60px;
			font-size:5.333vw;
			font-weight: 700;
		}
		.s_title{
			font-size:4.8vw;
			font-weight: 500;
		}
</style>
